<div class="main_bd mall-wrap">

    <div class="panel panel_overview">
        <div class="panel__hd">
            <h3 class="panel__title">选择叶子类目</h3></div>
        <div class="panel__bd">

            <form action="{:url('save')}" enctype="multipart/form-data" method="post"
                  class=" form goods_form goods_add_form">

                <div class="form-group flex">

                    <div class="margin10-c selectType" >
                        <div class="first">

                            <select id="selF"  class="col-sm-12" multiple=""></select>
                        </div>
                        <div class="col-sm-1">

                        </div>
                        <div class="second">

                            <select id="selB"  multiple=""></select>
                        </div>

                        <div class="third">

                            <select id="selC"  multiple=""></select>
                        </div>
                    </div>

                </div>

                <div class="current_box" style="text-align:center;margin: 20px 0;">
                    <div onclick="submit()" class=" btn btn_primary " >选择类别</div>
                </div>


            </form>

        </div>
    </div>
</div>


<script>

    /**
     * 加载
     * @param addtr
     * @param ele
     */
    function loadSpec(addtr,ele) {

    }

$(function () {

    var db = [];
    //多维数组做数据来源
    $.get('/type/getFoldList?len=2',function (res) {
        if(res.code==1){
            db = res.data;
            _init()
        }else{
            alert('获取类别数据失败');
        }
    })

    function Init(node) {
        return node.html("");
    }

    function _init() {
        //初始化select节点
        $.each(db, function (idx,val) {
            $("#selF").append("<option data-tindex='"+idx+"' value='"+val.id+"'>" + val.title + "</option>");
        })

        //一级变动
        $("#selF").change(function () {
            //清空二三级
            Init($("#selB"));
            Init($("#selC"));
            $.each(db,function (idx1,val1) {
                if ($("#selF option:selected").text() == val1.title) {
                    $.each(val1.child, function (idx2, val2) {
                        $("#selB").append("<option data-tindex='"+idx2+"'  value='"+val2.id+"'>" + val2.title + "</option>");
                    });
                }
            })

            $('#selB option:first-child').attr("selected",true);
            var findex = $("#selF option:selected").val()
            tindex= $("#selB option:selected").val()

            $.get("/type?parentid="+tindex+"&field=title,id",function (res) {
                if(res.code==1){
                    var cArr = res.data
                    setTypeLast(cArr)
                }else{
                    parent.layer.msg('获取子叶类目数据失败');
                }
            })
        })

        $("#selB").change(function () {
            var findex = $("#selF option:selected").val()
            tindex= $("#selB option:selected").val()

            $.get("/type?parentid="+tindex+"&field=title,id",function (res) {
                if(res.code==1){
                    var cArr = res.data
                    setTypeLast(cArr)
                }else{
                    parent.layer.msg('获取子叶类目数据失败');
                }
            })
        })
    }

    function setTypeLast(arr) {

        var inner = ''
        for(var x in arr){
            inner += "<option  value='"+arr[x].id+"'>" + arr[x].title + "</option>";
            // inner += "<label class=\"checkbox-inline\"><input type=\"radio\" name=\"typeid\" value=\""+arr[x].id+"\">"+arr[x].title+"</label>"
        }
        $("#selC").html('');
        $("#selC").append(inner);
    }

})


function submit() {
    // return false;
    cindex= $("#selC option:selected").val()
    if(!cindex){
        alert('请选择叶子类目');
        return false;
    }

    location.href = '/mall/add?typeid='+cindex;

    document.form[0].submit();
}
</script>

